<template>
	<view class="mine-container">
		
		
		<!-- Profile Section -->
		<view class="profile-section">
			<view class="avatar-container">
				<image class="avatar" @click="perviewImage(info.avatar)" :src="info.avatar" mode="aspectFill"></image>
				<view class="camera-icon" @click="addPic">
					<image src="/static/uniapp/camera.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="username">
				<text>{{info.username}}</text>
			</view>
		</view>
		
		<!-- Settings List -->
		<view class="settings-container">
			<view class="settings-item" @click="logout">
				<view class="item-left">
					<image class="icon logout-icon" src="/static/uniapp/logout.png" mode="aspectFit"></image>
					<text>Logout</text>
				</view>
				<image class="arrow-icon" src="/static/uniapp/arrow-right.png" mode="aspectFit"></image>
			</view>
			
			<view class="settings-item" v-if="model == 'iPhone'">
				<view class="item-left">
					<image class="icon face-icon" src="/static/uniapp/ficial.png" mode="aspectFit"></image>
					<text>Facial landing</text>
				</view>
				<view class="toggle-switch">
					<view class="switch-track">
						<view class="switch-thumb"></view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'pinia'
import { uploadFile } from "@/api/home";
import { updateUserInfo } from "@/api/login"
import { useUserinfoStore } from '@/store/info'
	export default {
		data() {
			return {
				facialLanding: true,
				model: 'iPhone'
			}
		},
		computed: {
			...mapState(useUserinfoStore, ['info'])
		},
		onLoad(){
			uni.getSystemInfo({
				success: function(res) {
					this.model = res.model;
				},
				fail: function(res) {
					this.model = 'Android';
				}
			})
		},
		methods: {
			...mapActions(useUserinfoStore, ['update', 'loginout']),
			toggleFacialLanding() {
				this.facialLanding = !this.facialLanding;
			},
			//*选择图片*//
			addPic: async function() {
				let that = this				
				uni.chooseImage({
					count: 9,  // 最多可以选择的图片张数，默认9
					sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
				    success: async function (res) {			
							console.log(res);			
							let uploadIFileRes = await uploadFile(res.tempFiles[0].path)
							console.log(uploadIFileRes);			
							await updateUserInfo({avatar: uploadIFileRes.full_path})
							that.update()
					}
				})
			},
			logout() {
				this.loginout()
				// uni.showModal({
				// 	title: 'Logout',
				// 	content: 'Are you sure you want to logout?',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			// Perform logout action
				// 			uni.showToast({
				// 				title: 'Logged out successfully',
				// 				icon: 'success'
				// 			});
				// 	}
				// });
			},
			perviewImage(img){
				uni.previewImage({
        urls: [img] // 图片地址数组
      });
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}
	
	.mine-container {
		display: flex;
		flex-direction: column;
		padding-bottom: 120rpx; /* For tab bar */
	}
	
	
	
	/* Profile Section */
	.profile-section {
		background-color: #f5f5f5;
		padding: 50rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: 20rpx solid #f5f5f5;
	}
	
	.avatar-container {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	.avatar {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		background-color: #ccc;
	}
	
	.camera-icon {
		position: absolute;
		right: -10rpx;
		bottom: -10rpx;
		width: 60rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.camera-icon image {
		width: 36rpx;
		height: 36rpx;
	}
	
	.username {
		font-size: 40rpx;
		font-weight: 600;
		color: #333;
	}
	
	/* Settings Container */
	.settings-container {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 30rpx;
		overflow: hidden;
	}
	
	.settings-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.settings-item:last-child {
		border-bottom: none;
	}
	
	.item-left {
		display: flex;
		align-items: center;
	}
	
	.icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 20rpx;
	}
	
	.logout-icon {
		color: #FF4D4F;
	}
	
	.face-icon {
		color: #19B36E;
	}
	
	.arrow-icon {
		width: 30rpx;
		height: 30rpx;
		opacity: 0.4;
	}
	
	/* Toggle Switch */
	.toggle-switch {
		position: relative;
	}
	
	.switch-track {
		width: 80rpx;
		height: 40rpx;
		background-color: #FF4D4F;
		border-radius: 20rpx;
		position: relative;
	}
	
	.switch-thumb {
		position: absolute;
		top: 4rpx;
		right: 4rpx;
		width: 32rpx;
		height: 32rpx;
		background-color: #fff;
		border-radius: 50%;
	}
	
	
</style>
